<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>



<!--https://element.eleme.cn/#/zh-CN/component/table" -->
<div id="app4" style="font-size: 14px">
	<template>
		<el-table
		:data="tableData"
		>
			<el-table-column
			prop="date"
			label="日期"
			>
			</el-table-column>
			<el-table-column
				prop="name"
				label="姓名"
				>
			</el-table-column>
			<el-table-column
			prop="address"
			label="地址">
			</el-table-column>
		</el-table>
	</template>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
		data() {
			return {
	        	//表格数据
	        	tableData: [{
	        		date: '2016-05-02',
	        		name: '王小虎',
	        		address: '上海市普陀区金沙江路 1518 弄'
	        	}, {
	        		date: '2016-05-04',
	        		name: '王小虎',
	        		address: '上海市普陀区金沙江路 1517 弄'
	        	}, {
	        		date: '2016-05-01',
	        		name: '王小虎',
	        		address: '上海市普陀区金沙江路 1519 弄'
	        	}, {
	        		date: '2016-05-03',
	        		name: '王小虎',
	        		address: '上海市普陀区金沙江路 1516 弄'
	        	}]
	        }
	    }
	}
	var Ctor = Vue.extend(Main);
	new Ctor().$mount('#app4');
</script>